import React from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  Animated,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {useChatMessageActions, useChatMessageState} from "@/hooks/chat/chat-message";

/**
 * MessageItemActions 组件 - 消息多选模式下的底部操作栏
 * 提供转发、复制、删除等批量操作
 *
 * @author FlanChan (refactored)
 */

const MessageItemActions: React.FC<any> = () => {
  const insets = useSafeAreaInsets();
  const {selectedMessages,enableMultipleSelect} = useChatMessageState()
  const {setSelectedMessage, setEnableMultipleSelect} = useChatMessageActions()

  // 如果不是多选模式，不显示组件
  if (!enableMultipleSelect) {
    return null;
  }

  const handleForwardPress = () => {
    //TODO
  };
  const handleDeletePress = () =>  setSelectedMessage([]); // 清空选中的消息

  const handleCancelPress = () =>  setEnableMultipleSelect(false); // 退出多选模式

  return (
    <Animated.View
      style={[styles.container, { paddingBottom: insets.bottom + 10 }]}
    >
      <View style={styles.actionsRow}>
        <View style={styles.leftSection}>
          <Text style={styles.countText}>
            已选择 {selectedMessages.length} 项
          </Text>
        </View>

        <View style={styles.rightSection}>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={handleForwardPress}
            disabled={selectedMessages.length === 0}
          >
            <Ionicons
              name="arrow-redo"
              size={24}
              color={selectedMessages.length > 0 ? "#3390ec" : "#97b8e3"}
            />
            <Text
              style={[
                styles.actionText,
                { color: selectedMessages.length > 0 ? "#3390ec" : "#97b8e3" },
              ]}
            >
              转发
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.actionButton}
            onPress={handleDeletePress}
            disabled={selectedMessages.length === 0}
          >
            <Ionicons
              name="trash"
              size={24}
              color={selectedMessages.length > 0 ? "#ff3b30" : "#ffa19c"}
            />
            <Text
              style={[
                styles.actionText,
                { color: selectedMessages.length > 0 ? "#ff3b30" : "#ffa19c" },
              ]}
            >
              删除
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.actionButton}
            onPress={handleCancelPress}
          >
            <Ionicons name="close-circle" size={24} color="#8e8e93" />
            <Text style={[styles.actionText, { color: "#8e8e93" }]}>取消</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "#f2f2f7",
    borderTopWidth: 1,
    borderTopColor: "#d1d1d6",
    paddingTop: 10,
    paddingHorizontal: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -3 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 5,
    zIndex: 1000,
  },
  actionsRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 5,
  },
  leftSection: {
    flex: 1,
  },
  rightSection: {
    flexDirection: "row",
  },
  actionButton: {
    alignItems: "center",
    marginLeft: 20,
  },
  actionText: {
    fontSize: 12,
    marginTop: 4,
  },
  countText: {
    fontSize: 15,
    color: "#3c3c43",
    fontWeight: "500",
  },
});

export default MessageItemActions;
